<template>
  <div>
    <Cascader :data="data" @on-change="test1" :value.sync="value"></Cascader>
  </div>
</template>
<script>
  import 'iview/dist/styles/iview.css'
  export default {
    data () {
      return {
        value: [],
        data: [],
        proName: '',
        cityName: '',
        proIndex: -1,
        proId: 0,
        cityId: ''
      }
    },
    methods: {
      getInfo: function () {
        let that = this
        that.$chaos.ajax({
          url: '/User/getUserData',
          userinfo: true,
          callback: function (type, res) {
            if (type === 'success') {
              let province = res.result.list.province
              let city = res.result.list.city
              that.proName = province
              that.cityName = city
              // that.data = [{
              //   value: province,
              //   label: province,
              //   children: [{
              //     value: city,
              //     label: city
              //   }]
              // }]
              // that.value = [province, city]
              // that.getPro()
            }
          }
        })
      },
      test: function () {
        let that = this
        that.$chaos.ajax({
          url: '/User/getAddress',
          data: {
            id: 0
          },
          callback: function (type, res) {
            if (type === 'success') {
              console.log(res)
              let list = res.result.list
              let data = []
              for (let i in list) {
                data[i] = {
                  value: list[i].id,
                  label: list[i].name
                }
              }
              that.data = data
            }
          }
        })
      },
      test1: function (val, sel) {
        let that = this
        let id = val[0]
        that.$chaos.ajax({
          url: '/User/getAddress',
          data: {
            id: id
          },
          callback: function (type, res) {
            console.log(type)
            if (type === 'success') {
              let list = res.result.list
              let data = []
              for (let i in list) {
                data[i] = {
                  value: list[i].id,
                  label: list[i].name
                }
              }
              for (let i in that.data) {
                if (that.data[i].value === id) {
                  that.data[i].children = data
                }
              }
            }
          }
        })
      },
      getPro: function () {
        let that = this
        that.$chaos.ajax({
          url: '/User/getAddress',
          data: {
            id: 0
          },
          callback: function (type, res) {
            if (type === 'success') {
              console.log(res)
              let list = res.result.list
              for (let i in list) {
                that.data[i] = {
                  value: list[i].id,
                  lable: list[i].name
                }
                if (list[i].name === that.value[0]) {
                  that.proId = list[i].id
                  that.proIndex = i
                }
              }
              that.getCity()
            }
          }
        })
      },
      getCity: function () {
        let that = this
        that.$chaos.ajax({
          url: '/User/getAddress',
          data: {
            id: that.proId
          },
          callback: function (type, res) {
            if (type === 'success') {
              let list = res.result.list
              let children = []
              for (let i in list) {
                children[i] = {
                  value: list[i].id,
                  label: list[i].name
                }
              }
              that.data[that.proIndex].children = children
            }
          }
        })
      }
    },
    created () {
      this.getInfo()
      this.test()
    }
  }
</script>
